<template>
	<div>
		<div class="touxiang-top">
			<h5>头像设置</h5>
			<hr />
		</div>
		<div class="touxiang-middle">
			<a href="javascript:;" :class="{'selectType':selType === 0}" @click="changeType(0)">自定义头像</a>
			<a href="javascript:;" :class="{'selectType':selType === 1}" @click="changeType(1)">热门推荐头像</a>
		</div>
		<div class="touxiang-bottom">
			<div class="touxiang-boleft">
				<keep-alive>
					<component :is="touxiang" @txsystem="txsystem"></component>
				</keep-alive>
			</div>
			<div class="touxiang-boright">
				<h6><i></i>头像预览</h6>
				<div class="touxiang-size">
					<img :src="imgUrl" alt="" class="img-max"/>
					<p>100px x 100px</p>
					<img :src="imgUrl" alt="" class="img-min"/>
					<p>50px x 50px</p>
				</div>
				<h6><i></i>我使用过的头像</h6>
				<div class="old-touxiang">
					<img :src="imgUrl" alt="" />
					<img :src="imgUrl" alt="" />
					<img :src="imgUrl" alt="" />
				</div>
			</div>
		</div>
		<div class="img-submit">
			<a href="javascript:;" @click='keepImg'>保存图像</a>
		</div>
		<PersonPop :popContent="isImg?popTrue:popError" v-if="isPop"/>
	</div>
</template>

<script>
	// 自定义头像组件
	import TxSelf from "@/components/portrait/txSelf"
	// 热门推荐头像组件
	import TxSystem from "@/components/portrait/txSystem"
	// 保存图片提示信息
	import PersonPop from '@/components/public/personPop'
	export default {
		components: {
			TxSelf,
			TxSystem,
			PersonPop
		},
		data () {
			return {
				touxiang: 'TxSelf', // 组件是自定义还是热门推荐
				selType: 0, // 点击选择是自定义还是热门
				imgUrl: require("../../../../assets/person/youxiaoqi.png"),
				popTrue: { // 弹框的内容
					imgUrl: require("../../../../assets/registerOk.png"),
					content: "更新头像成功"
				},
				popError: { // 弹框的内容
					imgUrl: require("../../../../assets/buyimg/payFailure.png"),
					content: "更新头像失败"
				},
				isPop: false, // 是否显示昵称不和规定弹框
				isImg: true, // 更新成功还是失败
				sysImg: false // 判断是否选中图片
			}
		},
		methods: {
			// 改变头像类型（自定义还是推荐）
			changeType (val) {
				var that = this
				that.selType = val
				that.touxiang = val?'TxSystem':'TxSelf'
			},
			// 推荐头像传递过来的地址
			txsystem (val) {
				var that = this 
				that.sysImg = true
			},
			// 保存图像
			keepImg () {
				var that = this
				that.isPop = true
				if (that.sysImg) {
					that.isImg = true
				} else {
					that.isImg = false
				}
				setTimeout (function () {
					that.isPop = false
				},2000)
			}
		}
	}
</script>

<style scoped>
	@import '../../../../../static/personal/portrait.css'
</style>
